<template>
  <div class="forget-password">
    <x-header>忘记密码<a slot="right"></a></x-header>
    <group>
      <x-input ref="phoneValid" v-model="phone" title="手机号" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
      <x-input v-model="code" title="验证码" placeholder="请输入右侧验证码">
        <span slot="right-full-height" v-html="imgPath"></span>
      </x-input>
    </group>
    <div class="code-password">
      <span style="color:#EFA79B" @click="handleValidateCode">看不清，换一张</span>
    </div>
    <div class="btn-box">
      <span style="background:#EFA79B;color:#ffffff;" class="password-btn" @click="handleNextStep">下一步</span>
    </div>
    <div style="color:#EFA79B;padding-top:0;" class="code-password">
      <span @click="$router.push('/login')">登录</span>
    </div>
    <confirm v-model="show"
      title="确认手机号码"
      @on-cancel="show=false"
      @on-confirm="onConfirm">
      <p style="text-align:center;">我们将发送验证码短信到这个手机号码：{{phone}}</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  Actionsheet,
  XInput,
  Confirm,
  Group,
  XHeader
} from 'vux';
const IndexStore = namespace('login');

@Component({
  components: {
    Confirm,
    Actionsheet,
    XInput,
    Group,
    XHeader
  }
})
export default class ForgetPassword extends Vue {
  @IndexStore.Action getValidateCaptcha
  @IndexStore.Action getCaptcha
  @IndexStore.State captcha
  show = false
  phone = ''
  code = ''
  imgPath = ''
  uuId = ''
  created () {
    this.handleValidateCode()
  }
  handleValidateCode () {
    const params = {
      uCode: this.getUuid()
    }
    this.getCaptcha(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.imgPath = this.captcha
      }
    })
  }
  onConfirm () {
    this.show = false
    this.$router.push({
      path: '/validcode',
      query: {
        phone: this.phone
      }
    })
  }
  getUuid () {
    let d = new Date().getTime();
    this.uuId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      let r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return this.uuId
  }
  handleNextStep () {
    let flag = true
    const phoneValid = this.$refs.phoneValid.valid
    if (!this.code) {
      flag = false
      this.$vux.toast.text('请输入验证码', 'middle')
    }
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!this.phone) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (flag) {
      const params = {
        tel: this.phone,
        captchaText: this.code,
        uCode: this.uuId
      }
      this.getValidateCaptcha(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.show = true
        }
      })
    }
  }
}
</script>
<style lang="less">
  .forget-password {
    padding-top: 46px;
    .code-password {
      text-align: right;
      padding: 10px;
      // font-size: 12px;
    }
    .btn-box {
      margin-top: 30px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .password-btn {
      border-radius: 40px;
      padding: 6px 40%;
      font-size: 14px;
    }
  }
</style>
